<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天龙商铺</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<style>
*{
    text-align: center;
}
a{
    text-decoration: none;
}
 a:visited{
    color: black;
}
li{
    list-style: none;
}
ul{
    list-style: none;
}
.box{
    width: 1366px;
    height: 100%;
    margin: 0px auto;
}
.head{
    width: 1000px;
    height:100px;
    background-color: papayawhip;
    position: relative; 
    margin-top: -905px;
    margin-left: 183px;
}
.h1{
    width: 400px;
    height: 50px;
    float: left;
    margin-top: 25px;
}
.h1 a{
    font-size: 20px;
    text-align: center;
}
.h2{
    width: 300px;
    height: 100px;
    float: left;
}
.h3{
    width: 200px;
    height: 100px;
    float: left;
}
.h3 p{
    text-align: left;
}
.h4{
    width: 100px;
    height: 100px;
    float: right;
}
#Sou{
    width: 150px;
    height: 20px;
    float: left;
    margin-top: 30px;
    margin-left: 30px;
}
#Suo{
    width: 50px;
    height: 25px;
    float: left;
    margin-top: 30px;
    margin-left: 20px;
}

.xiaoBox{
    height:42px;
    width: 1000px;
    position: relative;
    background-color: papayawhip;
    margin-top: 10px;
    margin-left: 182px;
}
.xiaoBox li { 
    text-align:center; 
    position: relative;
} 
.ziTi{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    margin-top: -1px;
    margin-left: 20px;
    
}
#jianJie, #jianJie li ul { 
    list-style-type:none; 
} 
#jianJie {
    float: left;
    margin-top: 0px;
    margin-left: -40px;
}  
#shangsha{
    position: relative;
    right: 40px;
}
#shangmian{
    z-index: 1232;
}
#jianJie li a:link, #jianJie li a:visited { 
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:140px; 
    height: 40px;
    line-height:40px;
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    background:#c5dbf2; 
    padding-left:10px; 
} 
#jianJie li a:hover { 
    color:#fff; 
    background:#2687eb; 
} 
#jianJie li ul li a:hover { 
    color:#fff; 
    background:#6b839c; 
} 
#jianJie li ul { 
    display:none; 
    position:absolute; 
    top:40px; 
    left:0; 
    margin-top:1px; 
    width:140px; 
} 
#jianJie li ul li ul { 
    display:none; 
    position:absolute; 
    top:0px; 
    margin-top:0; 
    margin-left:1px; 
    width:140px; 
}
.kaiShi{
    width: 150px;
    height: 40px;
    font-size: 20px;
    border:1px solid #fff;
    background-color: #C5DBF2;
    float: left;
    margin-left: 60px;
}
.a1{
    width: 150px;
    height: 40px;
    font-size: 20px;
    border:1px solid #fff;
    background-color: #C5DBF2;
    float: left;
    margin-left: 60px;
}
.a2{
    width: 150px;
    height: 40px;
    font-size: 20px;
    border:1px solid #fff;
    background-color: #C5DBF2;
    float: left;
    margin-left: 60px;
}
.a3{
    width: 150px;
    height: 40px;
    font-size: 20px;
    border:1px solid #fff;
    background-color: #C5DBF2;
    float: left;
    margin-left: 60px;
}
.cren{
    width: 1000px;
    height: 500px;
    background-color: papayawhip;
    position: relative;
    margin-left: 180px;
    margin-top: 30px;
}
.zb{
    width: 300px;
    height: 400px;
    float: left;
    margin-top: 50px;
    margin-left: 50px;
}
.sp1{
    width: 200px;
    height: 200px;
    float: left;
    margin-top: 140px;
    margin-left: 100px;
}
.sp2{
    width: 280px;
    height: 300px;
    float: right;
    margin-top: 40px;
    margin-right: 50px;
}
.sp2 li{
    text-align: left;
}
.jj{
    width: 570px;
    height: 100px;
    float: left;
    border: 1px dashed black;
    margin-left: 30px;
    margin-top: 10px;
}
.jj h3{
    text-align: left;
}
.jj p{
    font-size: 15px;
}
.foot{
    width: 1000px;
    height: 130px;
    position: relative;
    margin-left: 100px;
}
.js1{
    width: 200px;
    height: 50px;
    float: left;
    margin-top: 20px;
    margin-left: 40px;
}
.js2{
    width: 750px;
    height: 50px;
    float: left;
    margin-top: 20px;
    margin-left: 10px;
}
.js3{
    width: 750px;
    height: 60px;
    float: left;
    margin-left: 250px;
}
#becomeBig{
  width:200px;
  height:200px;
  border: 1px solid lightgray;
  position: absolute;
  right: 540px;
  top: 310px;
}
#Move{
  background:transparent;
  border: 1px solid lightgray;
  width:50px;
  height:50px;
  position:absolute;
  left:0px;
  top:0px;
  display:none;/*先让他隐藏，用js使其显示*/
}
#Bimg{
  width:400px;
  height:400px;
  background-color: white;
  border: 1px solid lightgray;
  overflow:hidden;
  position:absolute;
  bottom:-50px;
  left:220px;
  display:none;/*先让他隐藏，用js使其显示*/
}
#Bimg img{
  width:1600px;
  height:1600px;
  position:absolute;
  top:150;
  right:150px;
}

</style>
<body>
    <div class="box" id="box">
        <img src="imgs/天龙八部/zx.jpg" width="1366" height="900">
        <div class="head">
            <div class="h1">
                <a href="#">官方微博  |</a>
                <a href="#">商城论坛  |</a>
                <a href="#">元宝充值  |</a>
                <a href="#">手机版</a>
            </div>
            <div class="h2">
                <input type="text" id="Sou">
                <input type="submit" value="搜索" id="Suo">
            </div>
            <div class="h3">
                <p>天龙八部手游，赶快扫码下载。让我们一起冒险吧！</p>
            </div>
            <div class="h4">
                <img src="imgs/天龙八部/sm.png" width="100" height="100">
            </div>
        </div>

        <div class="xiaoBox">
            <ul id="jianJie"> 
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
                <a href="#"><p class="ziTi">门派分类</p></a> 
                    <ul id="shangmian"> 
                        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="shangsha"> 
                        <a href="#" >天山</a>
                        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="shangsha">
                        <a href="#">逍遥</a>
                        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="shangsha"> 
                        <a href="#">峨眉</a> 
                        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="shangsha"> 
                        <a href="#">丐帮</a>
                        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" id="shangsha"> 
                        <a href="#">星宿</a>  
                        </li> 
                    </ul>
                </li>
            </ul> 
            <div id="Ks" class="kaiShi">
                <a href="http://tlbb.qq.com/main.shtml"  target="_self">首页</a>
            </div>
            <div class="a1">
                <a href="#">武器装备</a>
            </div>
            <div class="a2">
                <a href="#">珍兽宝宝</a>
            </div>
            <div class="a3">
                <a href="#">精彩活动</a>
            </div>
        </div>
        <div class="cren">
            <div class="zb">
                <img src="imgs/天龙八部/zb.jpg" width="300" height="400">
            </div>
            <div class="sp2">
                <p>二代汪仔宝宝</p>
                <li>交易银两：1000W</li>
                <li>交易元宝：10W</li>
                <form>
                    <li>珍兽资质:</li>
                    <li>
                    <input type="radio" name="sex" value="">卓越
                    <input type="radio" name="sex" value="">优秀
                    <input type="radio" name="sex" value="">完美
                    </li>
                    <li>变异等级:</li>
                    <li>
                        <input type="checkbox" name="" value="">一级变异
                        <input type="checkbox" name="" value="">二级变异
                        <input type="checkbox" name="" value="">三级变异
                    </li>
                    <li>是否支持绑元购买：否</li>
                    <li>是否支持Q币购买：是</li>
                    <li>是否支持银行卡购买：是</li>
                    <li>是否购买：</li>
                    <input type="button" value="是">
                    <input type="button" value="否">
                </form>
            </div>
            <div class="jj">
                <h3>珍兽详细介绍</h3>
                <p>
                    珍兽名称：百变汪仔宝宝,
                    携带等级：65级,
                    珍兽类型：外攻,
                    携带技能：狡猾、借力、猛击
                </p>
            </div>
        </div>
        <div id="becomeBig">
            <img src="imgs/天龙八部/sp1.jpg" width="200px" height="200px" alt="#">
            <div id="Move"></div>
            <div id="Bimg">
                <img id="B_bimg" src="imgs/天龙八部/sp1.jpg" alt="#">
            </div>
        </div>
        <div class="foot">
            <div class="js1">
                <img src="imgs/天龙八部/kt3.png" width="200" height="50">
            </div>
            <div class="js2">
                <a href="#">关于腾讯游戏|</a>
                <a href="#">服务条款|</a>
                <a href="#">广告服务|</a>
                <a href="#">游戏客服|</a>
                <a href="#">腾讯游戏招聘|</a>
                <a href="#">游戏地图|</a>
                <a href="#">游戏活动|</a>
                <a href="#">腾讯网|</a>
                <a href="#">网站导航</a>
            </div>
            <div class="js3">
                <p>
                    本网络游戏适合年满18周岁以上的用户使用；请您确定已如实进行实名注册；为了您的健康，请合理控制游戏时间。出版号：ISBN 978-7-7979-5919-1 | 文网游备字〔2017〕M-RPG 0626 号
                </p>
            </div>
        </div>
    </div>    
</body>
<script>
    window.onload = function (){
        bigimg();
    }

    function displaySubMenu(li) { 
        var subMenu = li.getElementsByTagName("ul")[0]; 
        subMenu.style.display = "block"; 
    } 
    function hideSubMenu(li) { 
        var subMenu = li.getElementsByTagName("ul")[0]; 
        subMenu.style.display = "none"; 
    } 
    //下拉列表

    function bigimg(){
    var bbox = document.getElementById("becomeBig");
    var bmove = document.getElementById("Move");
    var bbimg = document.getElementById("Bimg");
    var b_bimg = document.getElementById("B_bimg");
    bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
        bbimg.style.display = "block";
        bmove.style.display="block";
    }
    bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
        bbimg.style.display = "none";
        bmove.style.display="none";
    }
    bbox.onmousemove = function(e){//获取鼠标位置
        var x = e.clientX;//鼠标相对于视口的位置
        var y = e.clientY;
        var t = bbox.offsetTop;//box相对于视口的位置
        var l = bbox.offsetLeft;
        var _left = x - l - bmove.offsetWidth/2;//计算move的位置
        var _top = y - t -bmove.offsetHeight/2;
        if(_top<=0)//滑到box的最顶部
        _top = 0;
        else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
        _top = bbox.offsetHeight-bmove.offsetHeight ;
        if(_left<=0)//滑到box的最左边
        _left=0;
        else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
        _left=bbox.offsetWidth-bmove.offsetWidth ;
        bmove.style.top = _top +"px";//设置move的位置
        bmove.style.left = _left + "px";
        var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
        var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
        var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
        var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
        b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
        b_bimg.style.left = -b_bimg_left + "px";
    }
    }
</script>
</html>